<template>
    <div id="gameSearch" v-if="showSearch">
        <van-popup v-model="showSearch" :autofocus="showSearch" position="top" :overlay="true" @click-overlay="closeModal" :close-on-click-overlay="false">
            <div class="searchBar">
                <i class="icon iconfont" @click="closeModal">&#xe72d;</i>
                <div class="input-wrapper">
                    <i class="icon-search"></i>
                    <input type="text" v-model="keyword" placeholder="请输入游戏名查找" ref="searchInput">
                </div>
                <span @click="search">搜索</span>
            </div>
            <div class="search-content" v-show="keyword">
                <scroll class="more-list" ref="scroll" 
                :data="list" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getMoreList">
                     <ul>
                        <li v-for="(item,index) in list" :key=index @click="goDetail(item)">
                            <i class="icon iconfont">&#xe613;</i>
                            <div class="game">
                                {{item.gamename}}
                                <span v-for="(label,index) in item.welfare.slice(2,3)" :key="index" :style="{background:label.color}">{{label.name}}</span>
                                <!-- <span v-for="(label,index) in item.welfare.slice(2,3)" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                            </div>
                        </li>
                    </ul>
                     <!-- 下拉加载显示 -->
                    <div class="loadlist" v-if="more">
                        <loadinglist :row="row"  :more="more"></loadinglist>
                    </div>
                   
                </scroll>
            </div>
            <div class="search-content" v-if="historyxs">
                <ul>
                    <li v-for="(item,index) in searches_list" :key=index>
                        <i class="icon iconfont">&#xe613;</i>
                        <div class="game" @click="goDetail(item)">
                            {{item.gamename}}
                            <span v-for="(label,index) in item.welfare.slice(2,3)" :key="index" :style="{background:label.color}">{{label.name}}</span> 
                        </div>
                        <i class="cha iconfont" @click="deleteList(item)">&#xe60e;</i>
                    </li>
                </ul>
                <div class="clear">
                    <span @click="clearhis">清除搜索历史</span>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {gameList} from "api/game_box";
    import {saveSearch,deleteSearch} from 'js/cache'  //引用本地存储js  
    import storage from 'good-storage'  //引入good-storage包  
    import Scroll from "common/scroll"
    import Loadinglist from "common/LoadingList"
    import { Toast } from 'vant';
    export default {
        props:{
            showSearch:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return{
                 keyword:'',
                 timer:null,
                 list:[],
                 searches_list:[], //历史搜索记录列表
                 historyxs:false,
                 row:true,
                 isload: false, //是否正在加载
                 scrollY: true,  //垂直滚动
                 scrollX: false, //水平滚动
                 pullup: true,   //上拉加载
                 beforeScroll: true,
                 bounce: false,  //动画
                 more:true,      //下拉加载是否还有更多
                 pageSize:18,
                 searchPage:1,
                 isload:false
            }
        },
        created(){
            this.searches_list = [];
            let searches=storage.get('_search_');  
            this.searches_list = searches?searches:[];
            if (this.searches_list.length > 0 ) {
                this.historyxs=true;  
            }else{
                this.historyxs=false;      
            }
        },
        activated(){
            this.searches_list = [];
            let searches=storage.get('_search_'); 
            this.searches_list = searches?searches:[];
            if (this.searches_list.length > 0 ) {
                this.historyxs=true;  
            }else{
                this.historyxs=false;      
            }
        },
        methods:{
            closeModal(){
                this.$emit("getCloseMsg")
            },
            deleteList(item){
                deleteSearch(item);
                this.searches_list = [];
                let searches=storage.get('_search_');  
                this.searches_list = searches?searches:[];
                if (this.searches_list.length > 0 ) {
                    this.historyxs=true;  
                }else{
                    this.historyxs=false;      
                }
            },
            //清空历史记录 
            clearhis(){   
                storage.remove('_search_');  
                this.searches_list = [];
                this.historyxs=false;  
            },
            goDetail(item) {
                let id=item.id;
                this.$emit("getCloseMsg");
                saveSearch(item); // 本地存储搜索的内容 
                setTimeout(()=>{
                    this.$router.push({
                        path: `/gameDetail/${id}`
                    });
                },100)  
            },
            search(){
                if(!this.keyword){
                    this.list=[];
                    return
                } 
                this.list=[];
                this.searchPage=1;
                this.more=true;
                this.isload=false;
                gameList("",this.searchPage,this.keyword,"",this.pageSize,"").then(res=>{
                        if(res.data.error==0){
                            this.list=res.data.content.data;
                            let totalPage=res.data.content.totalPage;
                            if(this.searchPage==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                        }else{
                            this.more = false;
                            this.isload=true;
                        }
                       
                    })
            },
            _getMoreList(){
                if (this.isload == true) {
                    return;
                }
                this.searchPage++;
                this.isload = true;
                gameList("",this.searchPage,this.keyword,"",this.pageSize,"").then(res=>{
                        if(res.data.error==0){
                            this.list=this.list.concat(res.data.content.data);;
                            let totalPage=res.data.content.totalPage;
                            this.isload = false;
                            if(this.searchPage==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                        }else{
                            this.more = false;
                            this.isload=true;
                        }
                       
                    })
            },
        },
        filters:{
            labelFilter(text){
                return text.substr(0,8);
            }
        },
        components:{
            Scroll,
            Loadinglist
        },
        watch:{
            keyword(){
                this.searchPage=1;
                this.more=true;
                this.isload=false;
                this.keyword.length==0&&this.searches_list.length>0? this.historyxs=true:this.historyxs=false; 
                if(!this.keyword){
                    this.list=[];
                    return
                }   
                if(this.timer){
                    clearTimeout(this.timer);
                }
                this.timer=setTimeout(()=>{
                    gameList("",this.searchPage,this.keyword,"",this.pageSize,"").then(res=>{
                        if(res.data.error==0){
                            this.list=res.data.content.data;
                            let totalPage=res.data.content.totalPage;
                            if(this.searchPage==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                            if(this.list.length==0){
                                Toast("没有搜索到您想要的游戏");
                                this.more = false;
                                this.isload=true;
                            }
                        }else{
                            this.more = false;
                            this.isload=true;
                        }
                       
                    })
                },300)
            },
            showSearch(){
                this.showSearch==false?this.keyword="":'';
                if(this.showSearch){
                     this.$nextTick(() => {
                          this.$refs.searchInput.focus()
                     })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss'; 
.placeholder{
    height:2rem;
    width:100%;
    background:#fff;
}
#gameSearch{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    z-index: 999;
    overflow: scroll;
    width: 7.5rem;
    transform: translatex(-50%);
}
 .searchBar{
    display:flex;
    align-items: center;
    width: 7.5rem;
    margin:0 auto;
    padding:0 0.2rem;
    height:0.95rem;
    background:#f2f2f2;
    .input-wrapper{
        margin:0 0.2rem;
        width:5.3rem;
        height:0.62rem;
        background:#fff;
        border-radius:5px;
    }
    .icon{
        padding: 0 0.1rem;
        font-size:0.4rem;
        color:#7b7b83;
    }
    span{
        padding:0.1rem;
        font-size:$font-size-m;
        color:$color-focus;
    }
    .input-wrapper{
        display:flex;
        align-items: center;
        .icon-search{
            margin:0 0.15rem;
            width:0.38rem;
            height:0.38rem;
            margin: 0 0.2rem;
            background-size: 0.38rem 0.38rem;
            background-repeat: no-repeat;
            @include bg-image('../../assets/image/icon_search');
        }
        input{
            flex:1;
            border:none;
            outline: none;
            padding-right:0.3rem;
        }
    }
}
.search-content{
    position:absolute;
    top:0.95rem;
    left:50%;
    bottom:auto;
    width:7.5rem;
    transform:translateX(-50%);
    background:#fff;
    overflow:scroll;
    max-height:12.5rem;
    ul{
        li{
            display:flex;
            height:0.76rem;
            line-height:0.76rem;
            padding-left: 0.26rem;
            font-size:$font-size-m;
            .icon{
                font-size:0.4rem;
            }
            .game{
                flex:1;
                margin-left:0.16rem;
                border-bottom:1px solid #ddd;
                span{
                    padding: 0.04rem 0.08rem;
                    color: #fff;
                    margin: 0.02rem;
                    border-radius: 4px;
                }
                .cha{
                    float:right;
                }
            }
        }
    }
    .clear{
        line-height:1rem;
        text-align:center;
        span{
            padding:0.2rem 0.3rem;
        }
    }
    .cha{
        margin-left:0.2rem;
        padding-right:0.2rem;
    }
}
</style>